@extends('app.base')

@section('page_title')
  登录
@endsection

@section('page_header')
  <link rel="stylesheet" href="/bower_components/AdminLTE/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/form.validation/dist/css/formValidation.min.css">
  <link rel="stylesheet" type="text/css" href="/bower_components/fancybox/dist/jquery.fancybox.min.css">
  <style>
.app {height:100%;}
  </style>
@endsection

@section('content')
  <div class="login-wrapper">
    <div class="login-form">
      <p>登录天下诗苑</p>
      <form method="post">
        {{ csrf_field() }}
        <div class="form-group">
          <label for="account">账号</label>
          <input class="form-control" type="text" id="account" name="account" placeholder="手机/邮箱/用户名"
          @isset ($data)
            value="{{ $data['account'] }}"
          @endisset
          />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input class="form-control" type="password" id="password" name="password" placeholder="密码" />
        </div>
        <div class="login-btn-groups">
          <button class="btn btn-login" type="submit">登录</button>
          <button class="btn btn-register" type="button">注册</button>
        </div>
      </form>
    </div>
  </div>
@endsection

@section('page_script')
  <script src="/bower_components/form.validation/dist/js/formValidation.min.js"></script>
  <script src="/bower_components/form.validation/dist/js/framework/bootstrap.min.js"></script>
  <script src="/bower_components/fancybox/dist/jquery.fancybox.min.js"></script>
  <script>
$(function(){
  @isset ($err)
    $.fancybox.open('<div class="message"><h2>错误!</h2><p>{{ $err }}</p></div>');
  @endisset

  $('.btn-register').on('click', function(e){
    e.preventDefault();
    window.location = '/register'
  })

  $('form').formValidation({
    framework: 'bootstrap',
    fields: {
      account: {
        validators: {
          notEmpty: {
            message: '请填写账号信息'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '请填写密码'
          }
        }
      }
    }
  });
})
  </script>
@endsection
